<template>
  <div class="map-wrapper">
    <div id="map"></div>
    <div class="actions"></div>
  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import { defaults } from 'ol/control'
import TileLayer from 'ol/layer/Tile'
import * as olInteraction from 'ol/interaction'
import { TileImage as TileImageSource } from 'ol/source'
export default {
  components: {},
  props: {},
  data() {
    return {
      map1: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initMap1()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    initMap1() {
      const baseLayerOptions = {
        url: 'https://aq.zhslapp.com:20110/tileservice/imagery/TianAerial/{z}/{x}/{y}',
        serviceType: 'xyz',
        opacity: 1,
        minimumLevel: 1,
        maximumLevel: 23,
        visible: true,
        zIndex: 1
      }
      const baselayer = this.createImageryTileLayer(baseLayerOptions)
      this.map1 = new Map({
        target: 'map',
        logo: false,
        layers: [baselayer],
        view: new View({
          projection: 'EPSG:4326',
          //center: [116.302429, 30.530761],
          center: [116.502429, 30.530761],
          zoom: 8.6, // 默认缩放级别
          // minZoom: 8.6, // 最小缩放级别
          // maxZoom: 8.6, // 最大缩放级别
          extent: [
            96.93069229487698, 20.104814507140834, 137.82743636345742,
            42.58926069041331
          ]
        }),
        // 设置地图控件，默认的三个控件都不显示
        controls: defaults({
          attribution: false,
          rotate: false,
          zoom: false
        }),
        interactions: new olInteraction.defaults({
          dragPan: false, // 禁用拖拽
          mouseWheelZoom: false // 禁用鼠标滚动缩放
        })
      })
    },
    createImageryTileLayer(options) {
      return new TileLayer({
        source: new TileImageSource({
          projection: options.projection || 'EPSG:3857',
          url: options.url
        }),
        extent: options.extent,
        zIndex: options.zIndex || 1,
        opacity: options.opacity || 1,
        visible: options.visible
      })
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.map-wrapper {
  height: 100%;
  position: relative;
  #map {
    height: 100%;
    width: 100%;
    background: url(./images/map-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
